<template>
	<view>
		<view class="u-p-40 u-p-r-20 u-bg-white">
			<view class="u-flex user-box u-col-top">
				<view class="u-m-r-30"><u-avatar :src="userInfo.avatar" size="140"></u-avatar></view>
				<view class="u-flex-1">
					<view class="u-font-28 u-p-b-20 u-p-t-10">{{ userInfo.nickname || '' }}{{ userInfo.title ? '-' + userInfo.title : '' }}</view>
					<view class="u-font-24" v-text="userInfo.bio || vuex_bio"></view>
				</view>
				<view class="u-content-color" style="line-height: 140rpx;" v-if="showMore" @click="openMore">
					更多
					<u-icon name="arrow-right" color="#606266" size="28"></u-icon>
				</view>
			</view>
			<view class="">
				<view class="u-flex u-text-center u-m-t-50">
					<view class="u-flex-4" @click="openPage(6)">
						<view class="u-tips-color u-p-b-10">回答</view>
						<view class="text-bold">{{ userInfo.answers }}</view>
					</view>
					<view class="u-flex-4" @click="openPage(7)">
						<view class="u-tips-color u-p-b-10">文章</view>
						<view class="text-bold">{{ userInfo.articles }}</view>
					</view>
					<view class="u-flex-4" @click="openPage(8)">
						<view class="u-tips-color u-p-b-10">关注者</view>
						<view class="text-bold">{{ userInfo.followers }}</view>
					</view>
				</view>
				<view class="u-flex u-text-center u-m-t-50" v-if="expert">
					<view class="u-flex-4">
						<u-button
							hover-class="none"
							type="primary"
							size="mini"
							:custom-style="{ backgroundColor: theme.bgColor, color: theme.color, width: '80%', height: '60rpx' }"
							@click="attention"
						>
							<view class="u-flex">
								<u-icon name="plus"></u-icon>
								<view class="u-m-l-10" v-text="userInfo.followed ? '已关注' : '关注TA'"></view>
							</view>
						</u-button>
					</view>
					<view class="u-flex-4">
						<u-button hover-class="none" type="warning" size="mini" :custom-style="buttonStyle" @click="openPage(0)">
							<view class="u-flex">
								<u-icon name="question-circle-fill"></u-icon>
								<text class="u-m-l-10">向TA提问</text>
							</view>
						</u-button>
					</view>
					<view class="u-flex-4">
						<u-button
							hover-class="none"
							type="primary"
							size="mini"
							:custom-style="{
								backgroundColor: theme.lightColor,
								color: theme.bgColor,
								border: '1px solid ' + theme.faBorderColor,
								width: '80%',
								height: '60rpx'
							}"
							@click="sendMsg"
						>
							<view class="u-flex">
								<u-icon name="chat"></u-icon>
								<text class="u-m-l-10">发私信</text>
							</view>
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" z-index="200">
			<view class="" :style="{ height: navbarHeight + 'px' }"></view>
			<u-cell-item icon="edit-pen-fill" title="TA的回答" @click="openPage(1)"></u-cell-item>
			<u-cell-item icon="question-circle" title="TA的提问" @click="openPage(2)"></u-cell-item>
			<u-cell-item icon="order" title="TA的文章" @click="openPage(3)"></u-cell-item>
			<u-cell-item icon="account-fill" title="TA的粉丝" @click="openPage(4)"></u-cell-item>
			<u-cell-item icon="heart-fill" title="TA的关注" @click="openPage(5)"></u-cell-item>
		</u-popup>
	</view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
import { attention } from '@/common/fa.mixin.js';
export default {
	name: 'fa-user-header',
	props: {
		//认证专家
		expert: {
			type: Boolean,
			default: false
		},
		user: {
			type: Object,
			default: {}
		},
		showMore: {
			type: Boolean,
			default: false
		}
	},
	mixins: [attention],
	watch: {
		user: {
			handler: function(newValue, oldValue) {
				//支付宝多次更新【这样才更新】
				if (this.userInfo.id == undefined || this.userInfo.followed == newValue.followed) {
					this.userInfo = newValue;
				}
			},
			immediate: true
		}
	},
	computed: {
		// 转换字符数值为真正的数值
		navbarHeight() {
			// #ifdef H5
			return 44;
			// #endif
			// #ifdef APP-PLUS
			return 44 + systemInfo.statusBarHeight;
			// #endif
			// #ifdef MP
			// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
			let height = systemInfo.platform == 'ios' ? 44 : 48;
			return height + systemInfo.statusBarHeight;
			// #endif
		}
	},
	data() {
		return {
			buttonStyle: {
				width: '80%',
				height: '60rpx'
			},
			userInfo: {},
			show: false
		};
	},
	methods: {
		openPage(index) {
			this.show = false;
			let p = [
				{ path: '/pages/community/question/post', query: { user_id: this.userInfo.id } },
				{ path: '/pages/community/my/answer', query: { user_id: this.userInfo.id } },
				{ path: '/pages/community/my/question', query: { user_id: this.userInfo.id } },
				{ path: '/pages/community/my/article', query: { user_id: this.userInfo.id } },
				{ path: '/pages/community/my/follower', query: { user_id: this.userInfo.id } },
				{ path: '/pages/community/my/attention', query: { user_id: this.userInfo.id } },
				{ path: '/pages/community/my/answer', query: { user_id: this.userInfo.id != this.vuex_user.id ? this.userInfo.id : '' } },
				{ path: '/pages/community/my/article', query: { user_id: this.userInfo.id != this.vuex_user.id ? this.userInfo.id : '' } },
				{ path: '/pages/community/my/follower', query: { user_id: this.userInfo.id != this.vuex_user.id ? this.userInfo.id : '' } }
			];
			this.$Router.replace(p[index]);
		},
		attention() {
			if (this.userInfo.followed) {
				this.goAttentionDelete(this.userInfo, 'user');
			} else {
				this.goAttentionCreate(this.userInfo, 'user');
			}
		},
		sendMsg() {
			this.$emit('send');
		},
		openMore() {
			this.show = true;
		}
	}
};
</script>

<style></style>
